<script setup lang="ts">
  import { computed, PropType, ref, watch } from 'vue'
  import pdf from '@/assets/image/pdf.png'
  import { ArrowLeftBold, ArrowRightBold, Edit } from '@element-plus/icons-vue'
  import _ from 'lodash'
  import video from '@/assets/image/pages/order/new/video.png'
  import { CustomFieldRender } from '@/views/order/detail/components/order-info/types'
  import UpdateOrderInfoModal from './UpdateOrderInfoModal.vue'
  import { useGetOrderSourceList } from '@/services/pages/order/useSoruce'

  const { list: workSourceList, getList: getWorkSourceList } = useGetOrderSourceList()

  defineOptions({
    name: 'OrderInfoOrderDetail',
  })

  const props = defineProps({
    orderDetail: {
      type: Object as PropType<OrderDetail>,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'update'): void
  }>()

  // 工单来源渲染文本
  const sourceRenderText = computed(() => {
    const source = workSourceList.value.find((item) => item.id === props.orderDetail.workSourceId)

    if (source) {
      return source.name
    }

    return ''
  })

  /**
   * 产品类型
   */
  const productType = computed(() => {
    if (props.orderDetail.workGoodsType === 1) {
      return 'business'
    }

    if (props.orderDetail.workGoodsType === 2) {
      return 'family'
    }

    return ''
  })

  // 附件预览弹窗显示状态
  const filePreviewModalVisible = ref(false)

  // 附件预览地址
  const filePreviewUrls = ref<Array<string>>([])

  // 附件索引，用来标记当前的附件是第几个
  const filePreviewIndex = ref(0)

  // 更新工单信息弹窗显示状态
  const updateOrderInfoModalVisible = ref(false)

  // 产品故障图
  // const goodFaultImg = computed(() => {
  //   if (props.orderDetail.workImages) {
  //     const result = props.orderDetail.workImages.find((item) => item.type === 3)
  //     if (result && result.image) {
  //       return result.image
  //     }
  //     return ''
  //   }

  //   return ''
  // })

  // 产品故障图
  // const goodCodeImg = computed(() => {
  //   if (props.orderDetail.workImages) {
  //     const result = props.orderDetail.workImages.find((item) => item.type === 4)
  //     if (result && result.image) {
  //       return result.image
  //     }
  //     return ''
  //   }
  //   return ''
  // })

  /**
   * 附件预览事件
   * @param {number} index - 预览的文件的索引
   */
  const handlePreviewFile = (index: number) => {
    filePreviewIndex.value = index
    filePreviewModalVisible.value = true
    props.orderDetail.orderCustomFields.forEach((field) => {
      if (field.type === 6) {
        filePreviewUrls.value = filePreviewUrls.value.concat(field.val)
      }
    })
  }

  /**
   * 附件预览弹窗关闭事件
   */
  const onCloseFilePreviewModal = () => {
    filePreviewModalVisible.value = false
    filePreviewUrls.value = []
    filePreviewIndex.value = 0
  }

  // 视频预览弹窗显示状态
  const videoPreviewModalVisible = ref(false)

  // 视频预览地址
  const videoPreviewUrls = ref<Array<string>>([])

  // 视频索引，用来标记当前的视频是第几个
  const videoPreviewIndex = ref(0)

  /**
   * 视频预览事件
   * @param {string} url - 视频预览地址
   * @param {number} index - 索引
   */
  const handlePreviewVideo = (url: Array<string>, index: number) => {
    videoPreviewModalVisible.value = true
    videoPreviewUrls.value = url
    videoPreviewIndex.value = index
  }

  /**
   * 视频预览弹窗关闭事件
   */
  const onCloseVideoPreviewModal = () => {
    videoPreviewModalVisible.value = false
    videoPreviewUrls.value = []
    videoPreviewIndex.value = 0
  }

  /**
   * 自定义字段渲染结构，为了方便更改样式
   */
  const customFieldRender = ref<CustomFieldRender>({
    txt: [],
    rate: [],
    file: [],
  })

  /**
   * 工单图片容器div
   */
  const orderImgListContentRef = ref<HTMLDivElement | null>(null)
  const orderImgActiveArrow = ref<'right' | 'left'>('right')
  const onOrderImgArrowClick = (type: 'right' | 'left') => {
    if (orderImgListContentRef.value) {
      if (type === 'right') {
        orderImgActiveArrow.value = 'left'
        orderImgListContentRef.value.style.transform = `translateX(-100%)`
      } else {
        orderImgActiveArrow.value = 'right'
        orderImgListContentRef.value.style.transform = `translateX(0)`
      }
    }
  }

  const customFieldFileListContentRefs = ref<Array<HTMLDivElement> | null>(null)
  const customFieldFileActiveArrowStates = ref<Array<'left' | 'right'>>([])
  const handleCustomFieldFileListArrowClick = (index: number, type: 'right' | 'left') => {
    if (customFieldFileListContentRefs.value && customFieldFileListContentRefs.value.length > 0) {
      if (type === 'right') {
        customFieldFileActiveArrowStates.value[index] = 'left'
        customFieldFileListContentRefs.value[index].style.transform = `translateX(-100%)`
      } else {
        customFieldFileActiveArrowStates.value[index] = 'right'
        customFieldFileListContentRefs.value[index].style.transform = `translateX(0)`
      }
    }
  }

  /**
   * 工单信息更新事件
   */
  const onUpdate = () => {
    emits('update')
  }

  // 销售渠道渲染文本
  const saleChannelRenderText = computed(() => {
    if (props.orderDetail.saleChannel === 1) {
      return '天猫'
    }

    if (props.orderDetail.saleChannel === 2) {
      return '抖音'
    }

    if (props.orderDetail.saleChannel === 3) {
      return '线下'
    }

    if (props.orderDetail.saleChannel === 4) {
      return '商用'
    }

    if (props.orderDetail.saleChannel === 5) {
      return '京东'
    }

    if (props.orderDetail.saleChannel === 6) {
      return '小红书'
    }

    return ''
  })

  // 责任归属渲染文本
  const accountabilityRenderText = computed(() => {
    if (props.orderDetail.accountability === 1) {
      return '工厂问题'
    }

    if (props.orderDetail.accountability === 2) {
      return '客人问题'
    }

    if (props.orderDetail.accountability === 3) {
      return '材料问题'
    }

    if (props.orderDetail.accountability === 4) {
      return '运输问题'
    }

    return ''
  })

  // 服务类型渲染文本
  const serviceTypeRenderText = computed(() => {
    if (props.orderDetail.workGoodsType === 1) {
      const obj = {
        1: '维修',
        2: '翻新',
        3: '检测',
        4: '安装',
        5: '保养',
        6: '报废评估',
        7: '其他',
      }
      return obj?.[props.orderDetail.serviceType] ?? ''
    }
    if (props.orderDetail.serviceType === 1) {
      return '维修'
    }

    if (props.orderDetail.serviceType === 2) {
      return '安装'
    }

    if (props.orderDetail.serviceType === 3) {
      return '调试'
    }

    if (props.orderDetail.serviceType === 4) {
      return '保养'
    }

    if (props.orderDetail.serviceType === 5) {
      return '技术支持'
    }

    return ''
  })

  // 服务方式渲染文本
  const serviceModeRenderText = computed(() => {
    if (props.orderDetail.serviceMode === 1) {
      return '上门'
    }

    if (props.orderDetail.serviceMode === 2) {
      return '远程'
    }

    if (props.orderDetail.serviceMode === 3) {
      return '返厂'
    }

    return ''
  })

  watch(
    props,
    (value) => {
      if (value.orderDetail) {
        customFieldRender.value.txt = []
        customFieldRender.value.file = []
        customFieldRender.value.rate = []
        value.orderDetail.orderCustomFields.forEach((field) => {
          if ([1, 2, 3, 4, 9, 10].includes(field.type)) {
            customFieldRender.value.txt.push(_.cloneDeep(field))
          }
          if (field.type === 8) {
            customFieldRender.value.rate.push(_.cloneDeep(field))
          }
          if ([5, 6, 7].includes(field.type)) {
            customFieldFileActiveArrowStates.value.push('right')
            customFieldRender.value.file.push(_.cloneDeep(field))
          }
        })
      }
    },
    { immediate: true, deep: true },
  )

  defineExpose({
    showUpdateOrderInfoDrawer: () => {
      updateOrderInfoModalVisible.value = true
    },
    getWorkSourceList,
  })
</script>

<template>
  <div class="order_detail_order_info">
    <div class="title">
      工单信息
      <template v-if="[1, 2, 3].includes(props.orderDetail.status)">
        <h-link @click="updateOrderInfoModalVisible = true">
          <div style="display: flex; align-items: center; column-gap: 2px">
            <el-icon color="#007cff" size="16">
              <Edit />
            </el-icon>
            修改
          </div>
        </h-link>
      </template>
    </div>
    <div class="info_list">
      <div class="text">
        <div class="info_item">
          <div class="label">
            <div class="txt">报单时间</div>
            <div class="middle">:</div>
          </div>
          <div class="value">{{ props.orderDetail.createTime }}</div>
        </div>
        <div class="info_item">
          <div class="label">
            <div class="txt">制单时间</div>
            <div class="middle">:</div>
          </div>
          <div class="value">{{ props.orderDetail.documentPreparationDate }}</div>
        </div>
        <div class="info_item">
          <div class="label">
            <div class="txt">产品类型</div>
            <div class="middle">:</div>
          </div>
          <div class="value">
            <template v-if="props.orderDetail.workGoodsType === 1">商用</template>
            <template v-if="props.orderDetail.workGoodsType === 2">家用</template>
          </div>
        </div>
        <div v-if="props.orderDetail.workGoodsType === 2" class="info_item">
          <div class="label">
            <div class="txt">销售渠道</div>
            <div class="middle">:</div>
          </div>
          <div class="value">
            {{ saleChannelRenderText }}
          </div>
        </div>
        <div v-if="props.orderDetail.workGoodsType === 2" class="info_item">
          <div class="label">
            <div class="txt">购买平台订单号</div>
            <div class="middle">:</div>
          </div>
          <div class="value">
            {{ props.orderDetail.buyPlatformOrderNo }}
          </div>
        </div>
        <div v-if="productType === 'business'" class="info_item">
          <div class="label">
            <div class="txt">责任归属</div>
            <div class="middle">:</div>
          </div>
          <div class="value">
            {{ accountabilityRenderText }}
          </div>
        </div>
        <div v-if="productType === 'business'" class="info_item">
          <div class="label">
            <div class="txt">服务类型</div>
            <div class="middle">:</div>
          </div>
          <div class="value">
            {{ serviceTypeRenderText }}
          </div>
        </div>
        <div v-if="productType === 'business'" class="info_item">
          <div class="label">
            <div class="txt">服务方式</div>
            <div class="middle">:</div>
          </div>
          <div class="value">
            {{ serviceModeRenderText }}
          </div>
        </div>
        <div class="info_item">
          <div class="label">
            <div class="txt">派单时间</div>
            <div class="middle">:</div>
          </div>
          <div class="value">{{ props.orderDetail.dispatcOrderTime }}</div>
        </div>
        <div class="info_item">
          <div class="label">
            <div class="txt">工单来源</div>
            <div class="middle">:</div>
          </div>
          <div class="value">{{ sourceRenderText }}</div>
        </div>
        <!-- <div v-if="productType === 'business'" class="info_item">
          <div class="label">
            <div class="txt">故障类型</div>
            <div class="middle">:</div>
          </div>
          <div class="value">
            {{ (props.orderDetail.faultType || []).map((item) => item.content).join('、') }}
          </div>
        </div> -->
        <!-- <div class="info_item">
            <div class="label">
              <div class="txt">故障现象</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text
              :max-width="204"
              :height="18"
              :text="(props.orderDetail.fault || []).join('、')"
              text-align="left"
              :tooltip-content-max-width="360"
            />
          </div> -->
        <!-- <div class="info_item">
            <div class="label">
              <div class="txt">故障原因</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text
              :max-width="204"
              :height="18"
              :text="(props.orderDetail.faultReason || []).join('、')"
              text-align="left"
              :tooltip-content-max-width="360"
            />
          </div> -->
        <!-- <div class="info_item">
            <div class="label">
              <div class="txt">解决措施</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text
              :max-width="204"
              :height="18"
              :text="(props.orderDetail.solution || []).join('、')"
              text-align="left"
              :tooltip-content-max-width="360"
            />
          </div> -->
        <!-- <div class="info_item">
            <div class="label">
              <div class="txt">故障描述</div>
              <div class="middle">:</div>
            </div>
            <div class="value">
              {{ props.orderDetail.faultDescribe }}
            </div>
          </div> -->
        <!-- <div class="info_item">
            <div class="label">
              <div class="txt">工单客服</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ props.orderDetail.emp }}</div>
          </div> -->
        <!-- <div class="info_item">
            <div class="label">
              <div class="txt">工单分类</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ props.orderDetail.orderType }}</div>
          </div> -->
        <!-- <div class="info_item">
            <div class="label">
              <div class="txt">处理方式</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ props.orderDetail.orderWay }}</div>
          </div> -->
        <div class="info_item">
          <div class="label">
            <div class="txt">预约开始时间</div>
            <div class="middle">:</div>
          </div>
          <div class="value">{{ props.orderDetail.orderReservationStartTime }}</div>
        </div>
        <div class="info_item">
          <div class="label">
            <div class="txt">预约结束时间</div>
            <div class="middle">:</div>
          </div>
          <div class="value">{{ props.orderDetail.orderReservationEndTime }}</div>
        </div>
        <div class="info_item">
          <div class="label">
            <div class="txt">客服</div>
            <div class="middle">:</div>
          </div>
          <div class="value">
            {{ props.orderDetail.emp }}
          </div>
        </div>
        <div class="info_item">
          <div class="label">
            <div class="txt">客服备注</div>
            <div class="middle">:</div>
          </div>
          <div class="value">
            {{ props.orderDetail.remark }}
          </div>
        </div>
        <div v-for="(item, index) in customFieldRender.txt" :key="index" class="info_item">
          <div class="label">
            <div class="txt">{{ item.name || '' }}</div>
            <div class="middle">:</div>
          </div>
          <div class="value">{{ item.val.join('、') || '' }}</div>
        </div>
        <div v-for="(item, index) in customFieldRender.rate" :key="index" class="info_item">
          <div class="label">
            <div class="txt">{{ item.name || '' }}</div>
            <div class="middle">:</div>
          </div>
          <div class="value">
            <el-rate
              style="height: 16px"
              disabled
              :model-value="Number(item.val[0]) / 2"
              allow-half
            />
          </div>
        </div>
        <div class="info_item">
          <div class="label">
            <div class="txt">故障描述</div>
            <div class="middle">:</div>
          </div>
          <div class="value">{{ props.orderDetail.content || '' }}</div>
        </div>
        <div class="info_item">
          <div class="label">
            <div class="txt">保修类型</div>
            <div class="middle">:</div>
          </div>
          <div class="value">{{ props.orderDetail.overinsured ? '保外' : '保内' }}</div>
        </div>
        <div class="info_item">
          <div class="label">
            <div class="txt">故障类型(反馈故障)</div>
            <div class="middle">:</div>
          </div>
          <div class="value">{{
            (props.orderDetail.faultType || []).map((item) => item.oneFaultType).join('、')
          }}</div>
        </div>
        <div class="info_item">
          <div class="label">
            <div class="txt">完工时效</div>
            <div class="middle">:</div>
          </div>
          <div class="value">{{ props.orderDetail.completionAging }}</div>
        </div>
        <div
          v-if="props.orderDetail.network && props.orderDetail.network.includes('电匠院')"
          class="info_item"
        >
          <div class="label">
            <div class="txt">工单推送错误提示</div>
            <div class="middle">:</div>
          </div>
          <div class="value">{{ props.orderDetail.thirdPushErrorMsg || '' }}</div>
        </div>
        <div
          v-if="props.orderDetail.network && props.orderDetail.network.includes('电匠院')"
          class="info_item"
        >
          <div class="label">
            <div class="txt">第三方系统工单号</div>
            <div class="middle">:</div>
          </div>
          <div class="value">{{ props.orderDetail.otherOrderNo }}</div>
        </div>
      </div>
    </div>

    <!-- 只包含工单图片、产品故障图、产品条码图 -->
    <div class="image-list-container">
      <!-- <div v-if="goodFaultImg" class="info-item">
          <div class="label"> 故障图片: </div>
          <div class="value good-fault-img">
            <h-image
              :src="goodFaultImg"
              :width="80"
              :height="50"
              fit="contain"
              :padding="2"
              :show-del-btn="false"
            />
          </div>
        </div>
        <div v-if="goodCodeImg" class="info-item">
          <div class="label"> 条码图: </div>
          <div class="value good-fault-img">
            <h-image
              :src="goodCodeImg"
              :width="80"
              :height="50"
              fit="contain"
              :padding="2"
              :show-del-btn="false"
            />
          </div>
        </div> -->
      <div class="info-item">
        <div class="label"> 故障图片: </div>
        <div class="file_list">
          <div
            v-show="orderDetail.orderImages.length >= 6"
            :class="['arrow', orderImgActiveArrow === 'left' ? 'enabled_arrow' : 'disabled_arrow']"
            @click="onOrderImgArrowClick('left')"
          >
            <i class="iconfont icon-arrow-left"></i>
          </div>
          <div class="list">
            <div ref="orderImgListContentRef" class="list_content">
              <div v-for="(img, imgIndex) in orderDetail.orderImages" :key="imgIndex" class="file">
                <HImage
                  v-if="img.includes('pdf')"
                  :src="pdf"
                  :width="80"
                  :height="50"
                  fit="contain"
                  :padding="2"
                  :show-del-btn="false"
                />
                <HImage
                  v-else
                  :src="img"
                  :width="80"
                  :height="50"
                  fit="contain"
                  :padding="2"
                  :preview-src-list="orderDetail.orderImages"
                  :initial-index="imgIndex"
                  :show-del-btn="false"
                />
              </div>
            </div>
          </div>
          <div
            v-show="orderDetail.orderImages.length >= 6"
            :class="['arrow', orderImgActiveArrow === 'right' ? 'enabled_arrow' : 'disabled_arrow']"
            @click="onOrderImgArrowClick('right')"
          >
            <i class="iconfont icon-arrow-right"></i>
          </div>
        </div>
      </div>
    </div>

    <div class="file">
      <div
        v-for="(field, fieldIndex) in customFieldRender.file"
        :key="fieldIndex"
        class="info_item"
      >
        <div class="label">
          <h-tooltip-text
            text-align="right"
            :text="field.name || ''"
            :height="18"
            :max-width="52"
            :tooltip-content-max-width="360"
          />
          <div class="middle">:</div>
        </div>
        <div class="file_list">
          <div
            v-show="field.val.length >= 6"
            :class="[
              'arrow',
              customFieldFileActiveArrowStates[fieldIndex] === 'left'
                ? 'enabled_arrow'
                : 'disabled_arrow',
            ]"
            @click="handleCustomFieldFileListArrowClick(fieldIndex, 'left')"
          >
            <i class="iconfont icon-arrow-left"></i>
          </div>
          <div class="list">
            <div ref="customFieldFileListContentRefs" class="list_content">
              <div v-for="(file, fileIndex) in field.val" :key="fileIndex" class="file">
                <HImage
                  v-show="field.type === 5"
                  :src="file"
                  :width="80"
                  :height="50"
                  :padding="2"
                  fit="contain"
                  :show-del-btn="false"
                  :preview-src-list="field.val"
                  :initial-index="fileIndex"
                />
                <HImage
                  v-show="field.type === 6"
                  :src="pdf"
                  :width="80"
                  :height="50"
                  fit="contain"
                  :is-show-img-preview="false"
                  :show-del-btn="false"
                  @preview="handlePreviewFile(fileIndex)"
                  @mask-click="handlePreviewFile(fileIndex)"
                />
                <HImage
                  v-show="field.type === 7"
                  :src="video"
                  :width="80"
                  :height="50"
                  fit="contain"
                  :is-show-img-preview="false"
                  :show-del-btn="false"
                  @preview="handlePreviewVideo(field.val, fileIndex)"
                  @mask-click="handlePreviewVideo(field.val, fileIndex)"
                />
              </div>
            </div>
          </div>
          <div
            v-show="field.val.length >= 6"
            :class="[
              'arrow',
              customFieldFileActiveArrowStates[fieldIndex] === 'right'
                ? 'enabled_arrow'
                : 'disabled_arrow',
            ]"
            @click="handleCustomFieldFileListArrowClick(fieldIndex, 'right')"
          >
            <i class="iconfont icon-arrow-right"></i>
          </div>
        </div>
      </div>
    </div>

    <!--视频预览弹窗-->
    <HDialog
      v-model="videoPreviewModalVisible"
      title="视频预览"
      :width="800"
      @close="onCloseVideoPreviewModal"
    >
      <div style="display: flex; align-items: center; gap: 12px; justify-content: center">
        <el-button
          type="primary"
          :disabled="videoPreviewIndex === 0"
          :icon="ArrowLeftBold"
          style="padding: 0 14px"
          @click="videoPreviewIndex--"
        />
        <video :src="videoPreviewUrls[videoPreviewIndex]" controls width="600"></video>
        <el-button
          type="primary"
          :disabled="videoPreviewIndex === videoPreviewUrls.length - 1"
          :icon="ArrowRightBold"
          style="padding: 0 14px"
          @click="videoPreviewIndex++"
        />
      </div>
    </HDialog>

    <!--附件预览弹窗-->
    <HDialog
      v-model="filePreviewModalVisible"
      title="附件"
      :width="800"
      @close="onCloseFilePreviewModal"
    >
      <div style="display: flex; align-items: center; gap: 12px; justify-content: center">
        <el-button
          type="primary"
          :disabled="filePreviewIndex === 0"
          :icon="ArrowLeftBold"
          style="padding: 0 14px"
          @click="filePreviewIndex--"
        />
        <iframe :src="filePreviewUrls[filePreviewIndex]" width="600" height="500"></iframe>
        <el-button
          type="primary"
          :disabled="filePreviewIndex === filePreviewUrls.length - 1"
          :icon="ArrowRightBold"
          style="padding: 0 14px"
          @click="filePreviewIndex++"
        />
      </div>
    </HDialog>

    <update-order-info-modal
      v-model:visible="updateOrderInfoModalVisible"
      :order-id="props.orderDetail.id"
      @update="onUpdate"
    />
  </div>
</template>

<style scoped lang="scss">
  .order_detail_order_info {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .title {
      font-size: 14px;
      font-weight: bold;
      padding-left: 6px;
      border-left: 3px solid $primaryColor;
      display: flex;
      align-items: center;
      column-gap: 4px;
    }

    .info_list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-left: 9px;

      .text {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        row-gap: 12px;
        column-gap: 64px;

        .info_item {
          display: flex;
          gap: 5px;
          width: 100%;

          .label {
            color: #606266;
            display: flex;
            white-space: nowrap;

            .txt {
              // width: 84px;
              text-align: right;
              cursor: pointer;
            }

            .middle {
              width: 3px;
            }
          }

          .value {
            width: 0;
            flex: 1;
          }

          .good-fault-img {
            height: 50px;
          }
        }
      }
    }

    .image-list-container {
      display: flex;
      padding-left: 9px;
      column-gap: 64px;

      .info-item {
        display: flex;
        column-gap: 5px;

        .label {
          color: #606266;
          white-space: nowrap;
          // width: 84px;
          text-align: right;
        }

        .value {
          width: 204px;
        }
      }
    }

    .file {
      display: flex;
      flex-wrap: wrap;
      column-gap: 100px;
      row-gap: 12px;

      .info_item {
        display: flex;
        gap: 5px;

        .label {
          color: #606266;
          display: flex;
          height: 18px;
          line-height: 18px;

          .txt {
            text-align: right;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
          }

          .middle {
            width: 3px;
          }
        }
      }
    }

    .file_list {
      max-width: 480px;
      min-width: 480px;
      display: flex;
      gap: 5px;

      .arrow {
        min-width: 24px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-sizing: border-box;
        transition: all 0.4s ease;
      }

      .enabled_arrow {
        cursor: pointer;
        border: 1px solid #ebeef5;
        transition: all 0.4s;

        .iconfont {
          color: $primaryColor;
          transition: all 0.4s;
        }

        &:hover {
          border-color: $primaryColor;
          background-color: $primaryColor;

          .iconfont {
            color: #fff;
          }
        }
      }

      .disabled_arrow {
        cursor: not-allowed;
        border: 1px solid #ebeef5;

        .iconfont {
          color: #ebeef5;
        }
      }

      .list {
        width: 420px;
        overflow: hidden;

        .list_content {
          display: flex;
          gap: 5px;
          transition: all 0.4s ease;

          .file {
            width: 80px;
            height: 50px;
          }
        }
      }
    }
  }
  .field_list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 32px;
    row-gap: 18px;
    column-gap: 70px;

    .el-form-item {
      margin: 0;

      .el-form-item__label {
        height: 28px;
        line-height: 28px;
      }

      .el-form-item__content {
        flex-direction: column;
        align-items: flex-start;

        .el-input {
          width: 258px;
        }

        .el-textarea {
          width: 258px;
        }

        .el-checkbox-group {
          height: 28px;
          display: flex;
          column-gap: 12px;

          .el-checkbox {
            height: 28px;
            margin: 0;
            column-gap: 5px;

            .el-checkbox__label {
              padding: 0;
              font-size: 12px;
            }
          }
        }

        .el-radio-group {
          height: 28px;
          display: flex;
          column-gap: 12px;

          .el-radio {
            height: 28px;
            margin: 0;
            column-gap: 5px;

            .el-radio__label {
              height: 14px;
              line-height: 14px;
              padding: 0;
            }
          }
        }

        .upload_file {
          width: 258px;
          display: flex;
          flex-direction: column;
          row-gap: 8px;

          .el-upload {
            .el-upload-dragger {
              padding: 0;
              height: 72px;
              background: none;
              border: none !important;
              display: flex;
              align-items: center;

              .iconfont {
                font-size: 72px;
                color: #fff;
              }
            }
          }

          .file_list {
            display: flex;
            flex-wrap: wrap;
            column-gap: 11px;
            row-gap: 8px;

            .file_item {
              width: 56px;
              list-style: none;
              display: flex;
              flex-direction: column;
              column-gap: 2px;
            }
          }
        }

        .el-form-item__error {
          margin: 0;
        }
      }
    }
  }
</style>
